<template>
	<view class="main">
		<view class="header">
			<view class="left">
				<view class="phopo">
					<image :src="detail.user.avatar == '' ? 'https://www.szzn.group/uploads/20221115/183193e92b0a813e1134627e155f1b33.png' : detail.user.avatar" mode=""></image>
				</view>
				<view class="title">
					<view class="label">
						<view class="name">{{ detail.user.nickname }}</view>
						<view class="time">{{ detail.diffTime }}</view>
					</view>
					<view class="active">{{ detail.categoryName }}</view>
				</view>
			</view>
			<view class="right" style="font-size: 24rpx;">{{ detail.createdAt | dateForma }}</view>
		</view>
		<view class="contents">
			<view class="" style="font-weight: 700;">{{ detail.title }}</view>
			<view class="" style="">{{ detail.content.text }}</view>
			<view class="images">
				<image
					style="width: 150rpx;height: 150rpx;display:block;margin: 0 10rpx;"
					:src="item.thumbUrl"
					@click="imagePreview(detail.content.indexes[101].body, inx)"
					mode=""
					v-for="(item, inx) in detail.content.indexes[101].body"
					:key="inx"
				></image>
			</view>
		</view>

		<view class="content"><view class="decollator"></view></view>

		<view class="comment">
			<view class="title">
				<view class="pinlun">评论&nbsp;{{ totalCount }}</view>
				<view class="praise"></view>
			</view>
			<view class="content" style="border-bottom: 1px solid #eee;padding: 15rpx 0;" v-for="(i, index) in pinlunList" :key="index" v-if="pinlunList.length != 0">
				<view class="pinlunlist">
					<view class="left">
						<view class="">
							<image :src="i.user.avatar == '' ? 'https://www.szzn.group/uploads/20221115/183193e92b0a813e1134627e155f1b33.png' : detail.user.avatar" mode=""></image>
						</view>
						<view class="name">{{ i.user.nickname }}</view>
					</view>
					<view class="right"></view>
				</view>
				<view class="inputarea">
					<view class="content"><mp-html :content="i.summaryText"></mp-html></view>
					<view class="reply">
						<view class="time">{{ i.createdAt }}</view>
					</view>
				</view>
			</view>
			<view class="zanwu" @click="jionTopic" v-if="pinlunList.length == 0"><view class="">暂无评论，点击抢沙发</view></view>
		</view>

		<!-- 底部 -->
		<view class="fooder">
			<view class="left">
				<view class="comment" @click="jionTopic">
					<van-icon name="edit" style="margin-right: 16rpx; font-size: 16px;" />
					写评论...
					<van-icon />
				</view>
			</view>
			<view class="right">
				<!-- <view class="">
					<image class="logo" src="/static/selecthome.png" mode=""></image>
				</view> -->
				<!-- <view class="">
					<image class="logo" src="https://www.szzn.group/uploads/20221115/6d84217c7b07b38abe23e213f4fc246f.png" mode=""></image>
				</view> -->
				<view class="" style="position: relative;">
					<image class="logo" src="https://www.szzn.group/uploads/20221115/589b79f87977aef399e922e9f5ca8d36.png" mode=""></image>
					<button style="opacity: 0;position: absolute;top: 50%;transform: translateY(-50%);" open-type="share">123</button>
				</view>
			</view>
		</view>

		<van-popup :overlay="false" :show="jionpopulshow" position="bottom" custom-style="height: 40%;" @close="onClose">
			<view class="content">
				<view class="top">
					<view class="" @click="onClose"><van-icon name="cross" size="20px" color="#ccc"></van-icon></view>
				</view>
				<view class="bottom">
					<textarea name="" placeholder="友善是交流的起点" v-model="content"></textarea>
					<view class="fabu" @click="fabu">发布</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
import { detail, fabiaopinlun, getpinlun } from '@/api/circle.js';
export default {
	data() {
		return {
			jionpopulshow: false,
			detail: {},
			pinlunList: [],
			content: '',
			totalCount: '',
			arr: []
		};
	},
	onLoad(options) {
		if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
			uni.showModal({
				title: '提示',
				content: '未登入,请先登入',
				success: function(res) {
					if (res.confirm) {
						uni.reLaunch({
							url: '/page_login/index/index'
						});
					} else if (res.cancel) {
						uni.navigateBack();
					}
				}
			});
			return;
		}
		this.detailId = options.id;
		this.init(this.detailId);
	},
	// 分享
	onShareAppMessage() {
		return {
			title: 优栽园,
			path: 'page_home/articledetail/articledetail?id=' + this.classId
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: 优栽园,
			path: 'page_home/articledetail/articledetail?id=' + this.classId
		};
	},
	methods: {
		init(id) {
			let data = `threadId=${id}&dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
			detail(data).then(res => {
				this.detail = res.data.Data;
				let data = `filter[thread]=${id}&page=${1}&perPage=${200}&index=${1}&dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
				getpinlun(data).then(res => {
					this.pinlunList = res.data.Data.pageData;
					this.totalCount = res.data.Data.totalCount;
				});
			});
		},
		getpinlun() {
			let data = `filter[thread]=${this.detailId}&page=${1}&perPage=${200}&index=${1}&dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
			getpinlun(data).then(res => {
				this.pinlunList = res.data.Data.pageData;
				this.totalCount = res.data.Data.totalCount;
			});
		},
		imagePreview(images, index) {
			images.forEach(i => {
				this.arr.push(i.url);
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},
		onClose() {
			this.jionpopulshow = false;
		},
		// 打开品论
		jionTopic() {
			this.jionpopulshow = true;
		},
		overlay() {
			this.jionpopulshow = false;
		},
		fabu() {
			if (this.content == '') {
				uni.showToast({
					title: '评论不能为空',
					duration: 1000
				});
				return;
			}

			let data = {
				id: this.detailId,
				content: this.content,
				attachments: [],
				dzqSid: 22214006 - 1668060231880,
				dzqPf: 'h5'
			};
			fabiaopinlun(data).then(res => {
				if (res.data.Code == 0) {
					this.getpinlun();
					uni.showToast({
						title: '发表成功',
						duration: 1000
					});
					this.content = '';
					this.jionpopulshow = false;
				} else {
					uni.showToast({
						title: res.data.Message,
						duration: 1000
					});
					this.jionpopulshow = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	.header {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;

			.phopo {
				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}

			.title {
				display: flex;

				.label {
					display: flex;
					flex-direction: column;
				}

				.name {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

				.time {
					font-size: 22rpx;
					color: #bcbcbc;
				}

				.active {
					color: #fcac00;
					font-size: 24rpx;
					width: 132rpx;
					height: 36rpx;
					text-align: center;
					border-radius: 50px;
					margin-left: 15rpx;
					border: 1px solid #fcac00;
				}
			}
		}
	}

	.decollator {
		background-color: #f2f2f2;
		height: 11rpx;
	}

	.comment {
		padding: 20rpx 15rpx 0;

		.title {
			display: flex;
			justify-content: space-between;

			.pinlun {
				font-size: 28rpx;
			}

			.praise {
				font-size: 24rpx;
				color: #9b9b9b;
			}
		}

		.content {
			.pinlunlist {
				padding: 20rpx 15rpx;
				display: flex;
				justify-content: space-between;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 18rpx;
					vertical-align: middle;
				}

				.left {
					display: flex;
					align-items: center;
				}

				.right {
					font-size: 24rpx;
				}

				.name {
					font-size: 24rpx;
				}
			}

			.inputarea {
				padding: 0 0 0 86rpx;

				.content {
					font-size: 28rpx;
					width: 630rpx;
					height: auto;
				}
				.reply {
					display: flex;
					align-items: center;

					.reply-one {
						margin-right: 15rpx;
						font-size: 20rpx;
						color: #212121;
						width: 84rpx;
						height: 42rpx;
						border-radius: 50px;
						text-align: center;
						line-height: 42rpx;
						background-color: #f5f5f5;
					}

					.time {
						font-size: 20rpx;
						color: #979797;
					}
				}
			}
		}
		.content:last-child {
			padding: 7px 0 150rpx 0 !important;
			border-bottom: 0px !important;
		}
		.zanwu {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			font-size: 26rpx;
			color: #777;
		}
	}

	.fooder {
		position: fixed;
		bottom: 0;
		height: 130rpx;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 12rpx 30rpx 0;
		background-color: #fff;

		.comment {
			width: 350rpx;
			height: 52rpx;
			background-color: #f2f2f2;
			border-radius: 50px;
			font-size: 24rpx;
			line-height: 52rpx;
			padding: 0 0 0 18rpx;
		}

		.logo {
			width: 40rpx;
			height: 40rpx;
		}

		.right {
			width: 350rpx;
			display: flex;
			justify-content: flex-end;
			view {
				width: 150rpx;
				text-align: center;
			}
		}
	}

	::v-deep .van-popup {
		border-top: 1px solid #eee;
		background-color: #fff;
		padding: 20rpx 20rpx;

		.top {
			text-align: right;
		}

		.bottom {
			display: flex;
			justify-content: space-between;

			textarea {
				background-color: #eee;
				height: 200rpx;
				padding: 20rpx;
				border-radius: 20rpx;
			}

			.fabu {
				// color: #ccc;
				margin-top: 20rpx;
			}
		}

		.content {
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
		}
	}
}
.contents {
	padding: 10rpx 30rpx 20rpx;
	font-size: 28rpx;
}
.images {
	display: flex;
	flex-wrap: wrap;
}
</style>
